import server from '../../../utils/server';
// components/zhuanpan/zhuanpan.js
//创建并返回内部 audio 上下文 innerAudioContext 对象，创建音频对象
const start = wx.createInnerAudioContext();
const mid = wx.createInnerAudioContext();
const stop = wx.createInnerAudioContext();
let sceneVal = "";


Component({
  onLoad (query) {
    // scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
    const scene = decodeURIComponent(query.scene)
    sceneVal = scene;
    console.log(scene)
  },
  options: {
    // 开启多插槽，也就是说可以在模板中预留多个具名插槽，然后在组件中
    // 写插槽时指定当前内容是放在哪个插槽位置的
    multipleSlots: true
  },

  /**
   * 组件的属性列表
   * 用于组件自定义设置   组件的对外属性
   */
  properties: {
    probability: {
      type: Boolean, // 概率开关，默认false 随机
      value: false
    },

    musicflg: {
      type: Boolean, // 转盘声音开关，默认true
      value: true
    },

    fastJuedin: {
      type: Boolean, // 快速转动转盘的开关，默认false
      value: false
    },

    repeat: {
      type: Boolean, // 重复抽取开关，默认false
      value: false
    },

    size: {
      type: Number, // 转盘大小，传入宽度即可
      value: 600
    },

    zhuanpanArr: { // 可以切换的转盘选项, 支持多个
      type: Array,
      value: [{
        awards: [{
            id: 0, // id递增
            name: "", // 选项名 超过9个字时字体会变小点 大于13个数时会隐藏掉超出的
            color: '#FFEC8B', // 选项的背景颜色
            probability: 0 // 概率 0代表永远也转不到这个选项，数字越大概率也就越大,data中的probability属性设置为true时是才生效, 这属性也必须填写，不填写会出错
          },
          {
            id: 1,
            name: "",
            color: '#FFFFFF',
            probability: 10
          },
          {
            id: 2,
            name: "",
            color: '#FFEC8B',
            probability: 10
          },
          {
            id: 3,
            name: "",
            color: '#FFFFFF',
            probability: 10
          },
          {
            id: 4,
            name: "",
            color: '#FFEC8B',
            probability: 100
          },
          {
            id: 5,
            name: "",
            color: '#FFFFFF',
            probability: 300
          }
        ]
      }]
    },

  },

  /**
   * 私有数据,组件的初始数据
   * 可用于模版渲染   
   */
  data: {
    animationData: {}, // 转盘动画
    zhuanflg: false, // 转盘是否可以点击切换的标志位
    fastTime: 7600, // 转盘快速转动的时间
    slowTime: 3900, // 转盘慢速转动的时间
    runDegs: 0, // 转盘旋转了多少圈
    timer: null, // 清除转盘的时间clearTimeout(timer)
    block1: 'block', // 控制显示或隐藏转盘中心的图片
    block2: 'none',
    block3: 'none',
    block4: 'none',
    available: '可用抽奖次数',
    count: '',
    imageShow:true
  },


  // 组件生命周期函数，在组件实例进入页面节点树时执行
  attached: function () {
    // 引用资源
    start.src = 'https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/start.mp3'; // 转盘开始转动的音乐
    stop.src = 'https://gamesdata.oss-cn-hangzhou.aliyuncs.com/xiaojueding/stop.mp3'; // 转盘停止转动的音乐

    // // 获取剩余中奖次数
    this.selectUserOperCount();

    // 发送请求，获取后端数据源，显示到转盘上
    this.getGoodsName();
    // // 设置数据
    // this.setData({
    //   // awardsConfig不需要预先定义即可使用在渲染层
    //   awardsConfig: this.data.zhuanpanArr[0]
    // })

    // 初始化奖项
    this.initAdards();
  },



  /**
   * 组件的方法列表
   * 更新属性和数据的方法与更新页面数据的方法类似
   */
  methods: {
    /*获取剩余抽奖次数*/
    selectUserOperCount() {
      var that = this;
      var openid = wx.getStorageSync("openId");
      const token = wx.getStorageSync('token');
      wx.request({
        header:{
          "Authorization": token
        },
        url: 'http://localhost:8080/wx_user/selectUserOperCount/' + openid,
        data: {},
        success: function(res) {
          that.setData({
            count: res.data.data
          })
        }
      })
    },

      /*获取商品数据*/
    getGoodsName() {
      let groupNum = 1;
      let that = this;
      const token = wx.getStorageSync('token');
      wx.request({
        header:{
          "Authorization": token
       },
        url: server + 'goods/list/' + groupNum,
        success(res) {
          let goodsArr = res.data.data;
          for (let i = 0; i < goodsArr.length; i++) {
            that.data.zhuanpanArr[0].awards[i].name = goodsArr[i].name;
            that.setData({
              awardsConfig: that.data.zhuanpanArr[0],
            })
          }
        }
      })
    },

    /* 跳转至中奖清单页 */
    toMyAwards() {
      wx.navigateTo({
        url: '../../user/award/awardList/index',
      })
    },

    /* 转盘停止，显示弹出对话框 */
    // showAwardsDialog() {
    // this.setData({
    //    show:true
    // })
    // },

    /* 跳转至我的奖品页 */
    showAwards() {
      let that = this;
      // let goodsImageUrl = that.data.goodsImageUrl;
      wx.navigateTo({
        url: '../../user/award/index/index',
        success: function (res) {
          console.log(that.data.goodsImageUrl);
          res.eventChannel.emit('onToAward', {
            data: {
              imageUrl: that.data.goodsImageUrl,
              id: that.data.goodsId
            }
          })
        }
      })

    },





    /*
     * 公有方法
     */
    //判断值是否为空
    isNull(str) {
      if (str == null || str == undefined || str == '') {
        return true;
      } else {
        return false;
      }
    },

    //初始化数据
    initAdards() {
      // 给awardsConfig初始化数据为zhuanpanArr[0],是一个对象，内部的awards是一个数组
      var that = this,
        awardsConfig = that.data.zhuanpanArr[0]
      var t = awardsConfig.awards.length; // 数组长度
      var e = 1 / t,
        i = 360 / t,
        r = i - 90;

      for (var g = 0; g < t; g++) {
        awardsConfig.awards[g].item2Deg = g * i + 90 - i / 2 + "deg"; //当前下标 * 360/长度 + 90 - 360/长度/2
        // 给每个item绑定“角度”、“透明度”这个属性
        awardsConfig.awards[g].afterDeg = r + "deg";
        awardsConfig.awards[g].opacity = '1';
      }

      that.setData({
        // 这个数据在页面上会被用到turnNum，和数组的索引配合使用，来生成“角度”数据
        turnNum: e, // 页面的单位是turn
        awardsConfig: awardsConfig,
      })

      that._change(); //向父组件传出当前转盘的初始数据
    },

    // 初始化数据时向外传的参数，父组件可以监听这个事件然后获取这个数据，初始化的时候
    // 父组件就可以获取数据源
    _change() {
      this.triggerEvent('myData', this.data.awardsConfig); // 向父组件传出当前转盘的数组数据
    },
    //重置转盘
    reset() {
      // 重新再赋值一次
      var that = this,
        awardsConfig = that.data.zhuanpanArr[0];
      // 创建动画，其实就是停止动画
      var animation = wx.createAnimation({
        duration: 1,
        timingFunction: "ease"
      });
      that.animation = animation;
      // 角度为0，转圈为0
      animation.rotate(0).step(), that.data.runDegs = 0;

      // 同步至渲染层
      that.setData({
        animationData: animation.export(),
        // 按钮的显示切换
        block3: 'none',
        block4: 'block'
      })

      // 遍历数据源
      for (let x in awardsConfig.awards) {
        // 让每一项的透明度都是1，正常
        awardsConfig.awards[x].opacity = '1';
      }

      // 设置一个倒计时的函数
      setTimeout(function () {
        that.setData({
          block1: 'block',
          block4: 'none',
          awardsConfig: awardsConfig,
        })
      }, 300)
    },

    //父组件需要切换当前转盘的选项
    //如果有需要切换不同转盘的选项时，可以调用这方法
    //data: 转盘的数据
    //flag: 当转盘在转动过程中如果你想停止的话，可以传个true值，默认可不传
    switchZhuanpan(data, flag) {
      this.setData({
        awardsConfig: data,
        block1: 'block',
        block1: 'none',
        block3: 'none',
        block4: 'none',
        zhuanflg: false,
      })
      this.initAdards();

      if (flag) {
        this.reset();
        clearTimeout(this.data.timer);
        start.stop();
        mid.stop();
        stop.stop();
        wx.removeStorageSync('repeatArr');
      }
    },

    //不重复抽取
    //r:随机数 当前选项进行随机 这个暂时不太清楚做什么的
    _queryRepeat(r) {
      var that = this,
        flag = true,
        repeatArr = wx.getStorageSync('repeatArr'),
        repeatArr2 = [],
        awardsConfig = that.data.awardsConfig;
      if (that.isNull(repeatArr)) {
        repeatArr2.push(r), wx.setStorageSync('repeatArr', repeatArr2);
        return r;
      } else {
        var len = awardsConfig.awards.length,
          r = Math.random() * len >>> 0;
        for (let i in repeatArr) {
          if (r == repeatArr[i]) {
            flag = false;
            if (repeatArr.length == len) {
              wx.removeStorageSync('repeatArr');
              repeatArr2.push(r), wx.setStorageSync('repeatArr', repeatArr2);
              return r;
            } else {
              return that._queryRepeat(); //递归调用
            }
          }
        }
        if (flag) {
          repeatArr.push(r), wx.setStorageSync('repeatArr', repeatArr);
          return r;
        }
      }
    },


    /*
     * 内部私有方法建议以下划线开头
     * triggerEvent 用于触发事件,过triggerEvent来给父组件传递信息的
     * 写法： this.triggerEvent('cancelEvent', { num: 1 })  // 可以将num通过参数的形式传递给父组件
     */

    // GO转盘开始转动
    _zhuan() {
      // 同步数据源 转圈的圈数为data中的变量
      var that = this,
        awardsConfig = that.data.zhuanpanArr[0],
        runDegs = that.data.runDegs;
      //>>> 是无符号移位运算符
      // 随机数乘以数据源即数组的长度向右偏移0位，也就是说这个随机数在0-6之间
      var r = Math.random() * awardsConfig.awards.length >>> 0,
        runNum = 8;


      /*=============不重复抽取=============*/
      if (that.data.repeat) {
        r = that._queryRepeat(r);
      } else {
        wx.removeStorageSync('repeatArr');

        console.log('是否开启了概率？？？', that.data.probability);
        //开启概率 probability这属性必须要传个ture
        if (that.data.probability) {
          r = that._openProbability();
        }
      }
      /*=============不重复抽取=============*/


      console.log('当前答案选项的下标=====', r);
      setTimeout(function () {
        //转盘开始转动音乐，如果转盘铃声为true，那就mid这个音频对象播放
        that.data.musicflg ? that.data.fastJuedin ? mid.play() : start.play() : '';

        //要转多少度deg
        runDegs = runDegs || 0, runDegs = runDegs + (360 - runDegs % 360) + (2160 - r * (360 / awardsConfig.awards.length));

        // 创建动画
        var animation = wx.createAnimation({
          // 判断是否是快速转动转盘，如果是则slowTime3900ms，默认不是则7600ms
          duration: that.data.fastJuedin ? that.data.slowTime : that.data.fastTime,
          timingFunction: "ease"
        });
        that.animation = animation;

        //这动画执行的是差值 
        //如果第一次写rotate（360） 那么第二次再写rotate（360）将不起效果
        animation.rotate(runDegs).step(), 0 == r && (runDegs = 0);

        that.setData({
          animationData: animation.export(),
          block1: 'none',
          block2: 'block',
          zhuanflg: true,
        })

        that._setatZhuan(true);
      }, 100);


      that.setData({

        timer: setTimeout(function () {
          //转盘停止后，答案区域高亮显示，其他区域增加透明度
          for (let x in awardsConfig.awards) {
            if (x != r) {
              awardsConfig.awards[x].opacity = '0.3';
            } else {
              awardsConfig.awards[x].opacity = '1';
            }
          }

          //转盘停止后的音乐
          !that.data.musicflg ? '' : stop.play();

          that.setData({
            // 动画停止
            animationData: {},
            s_awards: awardsConfig.awards[r].name, //最终选中的结果
            awardsConfig: awardsConfig,
            block2: 'none',
            block3: 'block',
            zhuanflg: false,
          })

          let name = that.data.s_awards;
          const token = wx.getStorageSync('token');
          //发送请求，根据商品名字获取对应的商品，图片显示到弹出框上
          wx.request({
            header:{
              "Authorization": token
            },
            url: server + 'goods/selectWxGoodsByName',
            data:{
              goodsName:name
            },
            success(res) {
              console.log(res)
              let goodsImageUrl = res.data.data.wxImageVoList[0].imageUrl;
              console.log(goodsImageUrl)
              let id = res.data.data.id;
              that.setData({
                goodsImageUrl: goodsImageUrl,
                goodsId: id,
              })
              const openId = wx.getStorageSync('openId')
              //发送请求，将对应的中奖纪录插入数据库
              wx.request({
                header:{
                  "Authorization": token
                },
                url: server + 'record/insertPrizeRecord/' + openId,
                data: {
                  goodsId: that.data.goodsId
                },
                success(res) {
                  console.log(res)
                }
              })
            }
          })






          let newCount = that.data.count - 1;

          // 抛出事件给父组件，显示对话框
          // that.triggerEvent('showAwards',{},{});
          if (newCount >= 0) {
            that.setData({
              show: true,
              // 弹出奖品后，抽奖次数-1
              count: newCount,
              //更新数据库抽奖次数
            })
            const openid = wx.getStorageSync("openId");
            const token = wx.getStorageSync('token');
            wx.request({
              header:{
                "Authorization": token
              },
              url: server + 'wx_user/updateUserOperCount',
              data: {
                operCount: that.data.count,
                openid: openid 
              },
              success(res) {
                console.log(res)
              }
            })
          } else {
            that.setData({
              show: true,
              count: 0,
            })
            wx.showToast({
              title: '抽奖次数已用完!',
              duration: 2000,
            })
          }

          if (that.data.count == 0) {
            that.setData({
              imageShow: false
            })
          }

          that._myAwards();
          that._setatZhuan(false);
        }, that.data.fastJuedin ? that.data.slowTime : that.data.fastTime)
      })
    },


    // 开启概率 
    // 传的数越大概率越大
    // 传入0的话就永远摇不到这个选项
    _openProbability() {
      var that = this,
        awards = that.data.zhuanpanArr[0],
        arr = [];
      //5, 5, 20, 10 ,30 ,30, 0
      for (let i in awards) {
        // 每一项的概率不为0
        if (awards[i].probability != 0) {
          for (var x = 0; x < awards[i].probability; x++) {
            //把当前的概率数字 以当前选项下标的形式 都添加都空数组中，然后随机这个数组
            // 比如说当前这个选项的概率为20，则在数组中添加20个这一项，那么自然而然也就
            // 实现了20的几率
            arr.push(i);
          }
        }
      }
      // 随机数乘以数组的长度，向下取整，得到变量s，然后定位到数组中这个索引s的值，返回
      var s = Math.floor(Math.random() * arr.length);
      return arr[s];
    },

    //当前转盘的结果，是item的name
    _myAwards() {
      this.triggerEvent('myAwards', this.data.s_awards)
    },

    //转盘开始转动或者结束转动后的要传的值
    _setatZhuan(e) {
      this.triggerEvent('startZhuan', e);
    },

  }
})